<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聊天室登录</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

        <div class="login-container" id="app">
            <h2>聊天室登录</h2>
            <div id="loginForm">
                <div class="form-group">
                    <input type="text" id="account"
                           name="account"
                           v-model="users.account"
                           placeholder="账号"
                           required>
                </div>
                <div class="form-group">
                    <input type="password" id="password" name="password" placeholder="密码"
                           v-model="users.pwd"
                           required>
                </div>
                <button @click="login">登录</button>
            </div>
            <p>还没有账号？<a href="register.html">立即注册</a></p>
        </div>

        <!-- 引入 Vue 2 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <!-- 引入 Element UI 的 JS -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                users: {
                    account: '',
                    pwd: ''
                }
            },
            methods: {
                login() {
                    var params = new URLSearchParams(this.users);
                    axios.post('login.action?op=login', params).then(res => {
                        console.log(res);
                        const json = res.data;
                        if (json.code == 1) {
                            window.location.href = 'chat.html';
                            this.$message({
                                message: '登录成功,欢迎进入聊天室',
                                type: 'success'
                            });

                        } else {
                            this.$message({
                                message: '登录失败,请查看账号密码后登录',
                                type: 'error'
                            });
                        }
                    });
                }
            }
        });
    </script>

</body>
</html> 